<template>
  <svg @contextmenu.prevent.stop="contextMenuHandler">
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <rect width="300" height="20" fill="transparent" x="5" y="505"></rect>
      <text x="0" y="20" fill="#FFFFFF">{{name}}</text>
      <template v-if="state == 0">
        <line x1="80" y1="15" x2="300" y2="15" :stroke="color" stroke-width="6"></line>
        <circle :cx="circleTranslateX" cy="15" r="7" :fill="color"/>
      </template>
      <template v-else>
        <line x1="80" y1="15" x2="300" y2="15" :stroke="color" stroke-width="6"></line>
        <circle :cx="circleTranslateX" cy="15" r="7" :fill="color"/>
      </template>
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    name: {
      required: true, // 控件名称
      type: String
    },
    state: {    // 控件状态
      required: true,
      type: Number,
      default: 0
    },
    controlIndex: { // 控件索引
      required: true,
      type: Number,
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    circleTranslateX: {   // 线上交点偏移量
      type: Number,
      default: 80
    },
    color: {
      type: String,
      default: '#FB819D'
    }
  },
  methods: {
    // 右键事件
    contextMenuHandler() {
      this.$emit('contextmenu', this.controlIndex);
    }
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
svg {
  transform-origin: center center;
}
</style>